<!--
 * @Description: 生产经营单位新上岗人员安全生产培训考核记录表
 * @Autor: cjj
 * @Date: 2023-10
 * @LastEditTime: 
-->
<template>
  <div class="TISchedule">
    <div style="padding-right: 7px;">
      <el-button type="primary" style="float:right" @click="exportWord"
        >导出Word</el-button
      >
    </div>
    <div class="mytable" style="width:800px">
      <div class="table_title">生产经营单位新上岗人员安全生产培训考核记录表</div>
      单位名称：（盖章）
      <table>
        <tr>
          <td width="10%">姓名</td>
          <td width="15%"><input type="text" v-model="dataForm.realname" style="width:100%" readonly="readonly"/></td>
          <td width="10%">性别</td>
          <td width="10%">{{ getDict("sex", dataForm.gender) }}</td>
          <td width="10%">身份证号</td>
          <td><input type="text" v-model="dataForm.certificatesnumber" style="width:100%" readonly="readonly"/></td>
          <td width="5%">学历</td>
          <td>{{ getDict("Education", dataForm.education) }}</td>
          <td width="10%">专业</td>
          <td width="10%"><input type="text" v-model="dataForm.major" style="width:100%" readonly="readonly"/></td>
        </tr>
        <tr>
          <td>职务/职称</td>
          <td><input type="text" v-model="dataForm.title" style="width:100%" readonly="readonly"/></td>
          <td>部门</td>
          <td><input type="text" v-model="dataForm.department" style="width:100%" readonly="readonly"/></td>
          <td>工种</td>
          <td><input type="text" v-model="dataForm.typeOfWork" style="width:100%" readonly="readonly"/></td>
          <td>进厂日期</td>
          <td><input type="text" v-model="dataForm.enterDate" style="width:100%" readonly="readonly"/></td>
          <td>联系电话</td>
          <td><input type="text" v-model="dataForm.mobilephone" style="width:100%" readonly="readonly"/></td>
        </tr>
        <tr>
          <td>序号</td>
          <td>培训时间</td>
          <td>培训地点</td>
          <td colspan="2">实施层级<br>（公司级、车间级、班组级）</td>
          <td colspan="3">培训内容</td>
          <!-- <td></td>
          <td></td> -->
          <td>培训学时</td>
          <td>培训教师</td>
          <!-- <td></td> -->
        </tr>
        <tr v-for="(item, index) in list" :key="index">
          <td>{{ item.seq }}</td>
          <td>{{ item.learnDuringTime }}</td>
          <td>{{ item.learnPosition }}</td>
          <td colspan="2">{{ item.actLevel }}</td>
          <!-- <td></td> -->
          <td colspan="3">{{ item.learnContent }}</td>
          <!-- <td></td>
          <td></td> -->
          <td>{{ item.learnTime }}</td>
          <td>{{ item.learnTeacher }}</td>
        </tr>
        <tr>
          <td colspan="3">理论考试成绩</td>
          <!-- <td></td>
          <td></td> -->
          <td colspan="2"></td>
          <!-- <td></td> -->
          <td colspan="3">实操考核成绩</td>
          <!-- <td></td>
          <td></td> -->
          <td colspan="2"></td>
          <!-- <td></td> -->
        </tr>
        <tr style="border-left:none">
          <td colspan="10" style="text-align:left">填表人（签字）：<label style="float:right">{{ dataForm.rq }}</label></td>
          <!-- <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td> -->
        </tr>
      </table>
    </div>
  </div>
</template>
<script>
import request from "@/utils/request";
export default {
  name: "TISchedule",
  data() {
    return {
      loading: true,
      dataForm: {
        childrenVOList: []
      },
      list: [],
      radio: "a",
      trainingCategory: "cx",
      rq: ""
    };
  },
  created() {},
  methods: {
    init(id) {
      this.loading = true;
      request({
        url: "/api/class_archives/generateA18/" + id+`?organizeId=${this.$store.getters.organizeId}`,
        method: "get"
      }).then(res => {
        this.dataForm = res.data;
          // 创建10位数组
          this.list = Array.apply(null, { length: this.dataForm.childrenVOList.length }).map(() => {
            return {
              xh: "",
              kcmc: "",
              xs: "",
              ckjc: "",
              xm: "",
              xl: "",
              zw: ""
            };
          });
          // 获取数据数组长度
          let lgh = this.dataForm.childrenVOList.length;
          // 替换数组
          this.list.splice(0, lgh, ...this.dataForm.childrenVOList);
        this.loading = false;
      });
    },
    exportWord() {
      for (let key in this.dataForm) {
        if (this.dataForm[key] == null) {
          this.dataForm[key] = "";
        }
      }
      this.dataForm[this.radio] = "√";
      this.dataForm[this.trainingCategory] = "√";
      this.dataForm.organizeId = this.$store.getters.organizeId;
      request({
        responseType: "blob",
        url: "/api/class_archives/generateA18Export",
        method: "post",
        data: this.dataForm
      }).then(res => {
        // console.log(res, 123);
        var debug = res;
        if (debug) {
          var a = document.createElement("a");
          a.download = "生产经营单位新上岗人员安全生产培训考核记录表.docx";
          a.style.display = "none";
          var blob = new Blob([debug], { type: "application/x-msdownload" });
          a.href = URL.createObjectURL(blob);
          document.body.appendChild(a);
          a.click();
          document.body.removeChild(a);
        }
      });
    }
  }
};
</script>
<style scoped lang="scss">
// 引入公共样式
@import "../../xy_da_classArchives/components/TABLESTYLE.scss";
// .TISchedule {
//   width: 100%;
//   height: 78vh;
//   overflow-y: auto;
//   padding-top: 10px;
//   input {
//     border: none;
//     font-size: 14px;
//   }
//   textarea {
//     border: none;
//     font-size: 14px;
//     resize: none;
//   }
//   .gaugeOutfit {
//     margin-bottom: 5px;
//   }
// }
// .mytable {
//   width: 60%;
//   //   height: 100%;
//   //   padding: 0 20px;
//   margin: 0 auto;
//   font-size: 14px;
//   .table_title {
//     width: 100%;
//     height: 40px;
//     line-height: 40px;
//     text-align: center;
//     font-size: 18px;
//     font-weight: bold;
//     margin-bottom: 10px;
//   }
//   table {
//     width: 100%;
//     border-collapse: collapse;
//     border: 1px solid #000;
//     // margin-top: 5px;
//     th {
//       border: 1px solid #000;
//       //   height: 30px;
//       text-align: left;
//       padding: 5px 10px;
//     }
//     td {
//       border: 1px solid #000;
//       //   height: 30px;
//       text-align: left;
//       padding: 5px 10px;
//       .bottom_date {
//         width: 100%;
//         // height: 40px;
//         text-align: right;
//         div {
//           margin-top: 10px;
//         }
//       }
//     }
//   }
//   .table_bottom {
//     width: 100%;
//     height: 40px;
//     line-height: 40px;
//     font-size: 15px;
//     font-weight: bold;
//     margin-top: 10px;
//   }
// }

::v-deep .el-date-editor {
  border: none;
  padding: 0;

  .el-range-input {
    text-align: center;
    width: 100px;
    color: #000;
  }

  .el-range-separator {
    line-height: 30px;
  }
}

::v-deep .el-input__inner {
  padding: 0 !important;
  border: none !important;
}

::v-deep .el-icon-date {
  display: none;
}
</style>
